<template>
    <div class="register">
      <div class="contain">
          <div class="top">
              <h3>注册</h3>
              <p>已经有账户? <router-link to="/login" class="toLogin">点击登录</router-link></p>
          </div>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item
               label="手机号"
               prop="phone"
               :rules="[
              { required: true, message: '手机号码不能为空'},
              { type: 'number', message: '手机号码必须是数字'}
              ]">
                  <el-input v-model.number="formLabelAlign.phone" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item
               label="用户名"
               prop="username"
               :rules="[
              { required: true, message: '用户名不能为空'},
              ]">
                  <el-input v-model.number="formLabelAlign.username" maxlength="10"></el-input>
              </el-form-item>
              <el-form-item
              label="密码"
              prop="pass"
               :rules="[
              { required: true, message: '密码不能为空'},
              ]"
              >
                  <el-input type="password" v-model="formLabelAlign.pass" minlength="8" maxlength="20"></el-input>
              </el-form-item>
              <el-form-item
              label="确认密码"
              prop="confirmPass"
               :rules="[
              { required: true, message: '确认密码不能为空'},
              { validator: validateConfirm ,trigger:'blur'}
              ]"
              >
                  <el-input type="password" v-model="formLabelAlign.confirmPass" minlength="8" maxlength="20" ></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" class="submitButton" @click="submit">注册</el-button>
              </el-form-item>
          </el-form>
      </div>
    </div>
  </template>

<script>
import { register } from '@/api/login'

export default {
  name: 'registerRight',
  data () {
    return {
      formLabelAlign: {
        phone: '',
        pass: '',
        confirmPass: '',
        username: ''
      },
      labelPosition: 'right'
    }
  },
  methods: {
    async submit () {
      if (!/^1[3-9]\d{9}$/.test(this.formLabelAlign.phone)) {
        this.$message({
          showClose: true,
          message: '请输入正确的手机号码',
          type: 'error'
        })
        return
      }
      if (!this.formLabelAlign.pass || this.formLabelAlign.pass === '') {
        this.$message({
          showClose: true,
          message: '请输入密码',
          type: 'error'
        })
        return
      }
      if (this.formLabelAlign.pass.length < 8) {
        this.$message({
          showClose: true,
          message: '密码不能小于8位',
          type: 'error'
        })
        return
      }
      if (this.formLabelAlign.confirmPass !== this.formLabelAlign.pass) {
        this.$message({
          showClose: true,
          message: '两次输入密码不一致',
          type: 'error'
        })
        return
      }
      const res = await register(this.formLabelAlign.phone, this.formLabelAlign.username, this.formLabelAlign.pass)
      if (res.code === -4) {
        // 手机号已被注册
        this.$message({
          showClose: true,
          message: '手机号已被注册',
          type: 'error'
        })
        return
      }

      this.$message({
        showClose: true,
        message: '注册成功',
        type: 'success'
      })
      this.$router.push('/login')
    },
    validateConfirm (rule, value, callback) {
      if (value !== this.formLabelAlign.pass) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
  }
}
</script>

  <style scoped>
  .register {
      width: 80%;
  }
  .contain {
      width: 100%;
  }
  .top {
      display: flex;
      justify-content: space-between;
  }
  .contain h3 {
      margin-left: 40px;
      margin-bottom: 20px;
      font-size: 25px;
  }
  .submitButton {
      width: 100%;
  }

  </style>
